<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="90%">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="商品名称" prop="name">
				<el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableList" v-loading="loading" @selection-change="onSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="商品ID" align="center" prop="id" />
			<el-table-column label="直播商品封面" align="center" prop="coverImgUrl_image">
				<template #default="scope">
					<el-image :src="scope.row.coverImgUrl_image" fit="scale-down" style="width: 60px; height: 60px" />
				</template>
			</el-table-column>
			<el-table-column label="商品名称" align="center" prop="name" />
			<el-table-column label="商品价格" align="center" prop="price" />
			<el-table-column label="创建时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.create_time) }}</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm">确定</el-button>
				<el-button @click="onCancel">取消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';

import { livesApi } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

const LivesApi = livesApi()
export default {
	name: 'bulkImportGoodDialog',
	setup() {
		const state = reactive({
			title: '批量导入商品',
			open: false,
			queryParams: {
				id:'',
				name:'',
				pageNum: 1,
				pageSize: 10,
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
			form: {
				id: '',
				lives_goods_ids: '',
			},
			submitLoading: false,
		});

		const queryFormRef = ref(null);
		let callback: Function = () => {};

		/********** 点击事件(on开头) **********/
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		// 多选框选中数据
		const onSelectionChange = (selection: any) => {
			state.form.lives_goods_ids = selection.map((item: any) => item.id).join(',');
		};
		/** 提交按钮 */
		const onSubmitForm = () => {
			if (!state.form.lives_goods_ids) {
				ElMessage.warning('至少选择一个商品导入');
				return true;
			}
			state.submitLoading = true;
			console.log('state.form', state.form);
			_livesListAddGoods(state.form);
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			reset();
			callback = fn;
			state.open = true;
			state.queryParams.id = config.id;
			state.form.id = config.id;
			getList();
		};
		// 表单重置
		const reset = () => {
			state.form = {
				id: '',
				lives_goods_ids: '',
			};
		};
		const getList = () => {
			state.loading = true;
			_livesGoodsList1(state.queryParams);
		};

		/********** 网络事件 **********/
		// 直播间列表
		const _livesGoodsList1 = (params: object = {}) => {
			LivesApi.livesGoodsList1(params)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.total = res.data.info.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};
		// 直播间导入选中的商品
		const _livesListAddGoods = (params: object = {}) => {
			LivesApi.livesListAddGoods(params)
				.then(() => {
					ElMessage.success('导入成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};

		return {
			queryFormRef,
			onQuery,
			onResetQuery,
			onSelectionChange,
			onSubmitForm,
			openDialog,
			onCancel,
			getList,
			timeDictionary,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
